<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>仿照博客</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <title>Title</title>
    <style>
        body{
            background-color: #8EC5FC;
            background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
            margin: 0 0 0 0 ;
            color: white;
        }
        body>div{
            width: 1920px;
            margin: 0 auto;/*块级元素在当前行内 居中*/
        }
       /* .div1{
            height: 100%;width: 700px;background-color: #007bff; font-size: 35px;float: right;margin-right: 650px;
        }*/
        section{
            background-color: #343a40;
        }
        .fd{
            font-size: 30px;
            color: #433333;
            float: left;
            margin-left: 150px;
            list-style-type: none;/*去掉图标*/
            text-decoration: 0;
        }
        .col-md-9{
            background-color: #D9AFD9;
        }
        .col-md-3{
            background-color: #97D9E1;
        }
        .grid-item{
            width: 200px; /*设置瀑布流中每个元素的宽度为200*/
            margin: 0 10px 10px 0;/*设置间距*/
        }

    </style>
</head>
<body>
<div >
    <div style="background-color: #3e4963;height: 65px;width: 1920px">
        <a class="fd" style="float: left;margin-left:850px;color: white;/*padding-top: 10px;*/font-size: 45px" href="javascript:void (0)">时   光   卷   轴</a>
        <!--<h3 style="margin: 0 0 0 0;">时光卷轴</h3>-->
       <!--<div
       class="div1"><p style="margin: 0 auto">时光卷轴</p>
       </div>&lt;!&ndash;</h2>&ndash;&gt;-->
    </div>
    <div id="i1" style="background-color: hotpink;height: 50px;width: 1920px">
        <div>
            <div v-show=" user=='' " style="float: left">
                <a class="fd" href="/reg.html">注册</a>
                <a class="fd" href="/login.html">登录</a>
            </div>
        </div>
        <div v-show=" user!=''">
            <a class="fd" href="/send.html">推送时光</a>
            <a class="fd" href="/my.html">我的时间叶</a>
            <a class="fd" href="javascript:void (0)" @click="logout">退出登录</a>
            <a class="fd" href="/">时间树</a>
        </div>
        <div style="font-size: 30px;float: right;margin-right: 150px"><a href="javascript:void (0)" style="font-size: 30px;">用户:{{user.nick}}</a></div>
    </div>

    <section class="container">
        <div class="row">
            <div class="col-md-9">
                <!--瀑布流开始-->
                <div class="grid">
                    <div v-for="jz in arr" class="grid-item" style="width: 850px">
                        <div>
                            <h3>
                                <a  :href="'/detail.html?id='+jz.id">
                                    {{jz.author}}说:{{jz.content}}
                                </a>
                            </h3>
                            <p>发布于:{{jz.created}}</p>
                        </div>
                        <a :href="'/detail.html?id='+jz.id">
                            <img style="margin: 0 auto" :src="jz.url" class="img-responsive" alt="">
                        </a>
                        <div class="float_div">
                            <p><!--{{p.title}}-->xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                            <span class="fa fa-eye"><!--{{p.viewCount}}-->xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
                            <br>
                            <span class="fa fa-thumbs-o-up"><!--{{p.likeCount}}-->xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
                        </div>
                        <hr>
                    </div>
                </div>
                <!--瀑布流结束-->
            </div>


            <div id="right_div" class="col-md-3">
                <!--浏览最多开始
                <ul class="list-group">
                    <li class="list-group-item list-head">
                        <h4>
                            <i class="fa fa-eye">浏览最多</i>
                        </h4>
                    </li>
                    <li v-for="p in view_arr" class="list-group-item">
                        <div class="media">
                            <div class="media-left">
                                <a :href="'/0.html?id='+p.id">
                                    <img :src="p.url" class="media-object" style="width:60px;height: 50px">
                                </a>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">{{p.title}}</h4>
                                <p>{{p.intro}}</p>
                            </div>
                        </div>
                    </li>


                </ul>
                浏览最多结束

                最受欢迎开始
                <ul class="list-group">
                    <li class="list-group-item list-head">
                        <h4>
                            <i class="fa fa-thumbs-o-up">最受欢迎</i>
                        </h4>
                    </li>
                    <li v-for="p in like_arr" class="list-group-item">
                        <div class="media">
                            <div class="media-left">
                                <a :href="'/0.html?id='+p.id">
                                    <img :src="p.url" class="media-object" style="width:60px;height: 50px">
                                </a>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">{{p.title}}</h4>
                                <p>{{p.intro}}</p>
                            </div>
                        </div>
                    </li>
                </ul>
                最受欢迎结束-->
            </div>
        </div>
    </section>
</div>






<!--引入Vue和axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入moment.js-->
<script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.min.js"></script>
<script>
    let  herder_v = new Vue({
            el:".grid",
            data:{
                arr:[],
                user:""
            },
            created:function (){
                axios.get("/currentUser").then(function (response){
                   herder_v.user = response.data;
                    console.log("user="+herder_v.user);
                })
                //发请求得到当前用户的用户信息
                axios.get("/juanzhou/select").then(function (response){
                    herder_v.arr = response.data;
                    for (let jz of herder_v.arr) {
                        //修改时间格式
                        jz.created = moment(jz.created).format("YYYY年MM月DD日   HH:mm:ss")
                    }
                })

            },


    })
    let i1_v = new Vue({
        el:"#i1",
        data: {
            user:""
        },
        created:function (){
            axios.get("/currentUser").then(function (response){
                i1_v.user = response.data;
                console.log("user="+i1_v.user);
            })
        },
        methods:{
            logout:function (){
                axios.get("/logout").then(function (){
                    if (confirm("您确定退出吗?")){
                        location.reload();
                    }
                })
            }
        },
    })

</script>
</body>
</html>